<template>
  <view class="list-item" @click="toOrder">
    <!-- 头部信息(商户名称，订单状态) -->
    <orderItemHeader
      v-if="orderitem.shop && orderitem.shop.name"
      :orderitem="orderitem"
    ></orderItemHeader>

    <!-- 商品详情组件(单商品，多商品) -->
    <goodsDetail :orderitem="orderitem"></goodsDetail>

    <!-- 订单底部按钮组及价格 -->
    <orderOperate
      :orderitem="orderitem"
      :orderType="orderType"
      :user_id="user_id"
      @handleConfirm="handleConfirm"
      @handleCancle="handleCancle"
    ></orderOperate>
  </view>
</template>

<script>
import orderItemHeader from "./components/order-item-header.vue";
import goodsDetail from "./components/goods-detail.vue";
import orderOperate from "./components/order-operate.vue";

export default {
  components: {
    orderItemHeader,
    goodsDetail,
    orderOperate,
  },
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: {},
    },
    orderindex: {
      type: String,
      default: "0",
    },
    orderType: {
      type: String,
      default: "",
    },
    user_id: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleConfirm(e) {
      this.$emit("handleConfirm", e);
    },
    handleCancle(e) {
      this.$emit("handleCancle", e);
    },
    toOrder() {
      this.$emit("toOrder", { index: this.orderindex, item: this.orderitem });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  margin-top: 24rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx 36rpx;
}

.list-item:last-child {
  margin-bottom: 20rpx;
}
</style>
